<template>
  <view class="pinia-demo">
    <view class="title-h2">多语言</view>
    <text> {{ t('settings.tips') }}</text>
    <view>
      <button @click="toggleLocale('zh_CN')">切换中文</button>
      <button @click="toggleLocale('en')">切换英文</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { LocaleType } from '/#/config'
import { useI18n } from '/@/hooks/web/useI18n'
import { useLocale } from '/@/locales/useLocale'

const { changeLocale } = useLocale()

const { t } = useI18n()
async function toggleLocale(lang: LocaleType | string) {
  await changeLocale(lang as LocaleType)
}
</script>
<style lang="scss" scoped>
.pinia-demo {
  text-align: center;
  display: flex;
  flex-direction: column;

  .title-h2 {
    color: red;
    font-size: 40rpx;
  }

  .title-h3 {
    font-weight: bold;
  }
}
</style>
